<template>
  <div class="apply-scholarship-form">
    <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
    <h1>申请奖学金</h1>
    <el-form :model="form" ref="formRef" label-width="120px">
      <el-form-item>
        <img :src="form.avatar" class="avatar">
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="form.student_id" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.student_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="院系">
        <el-input v-model="form.department" disabled></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="form.major" placeholder="请填写专业"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" required>
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-select v-model="form.grade" placeholder="请选择年级">
          <el-option label="大一" value="大一"></el-option>
          <el-option label="大二" value="大二"></el-option>
          <el-option label="大三" value="大三"></el-option>
          <el-option label="大四" value="大四"></el-option>
          <el-option label="大五" value="大五"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="奖学金等级">
        <el-select v-model="form.scholarship_level" placeholder="请选择助学金等级">
          <el-option label="国家奖学金(10000元)" value="国家奖学金"></el-option>
          <el-option label="国家励志奖学金(6000元)" value="国家励志奖学金"></el-option>
          <el-option label="社会奖学金(8000元)" value="社会奖学金"></el-option>
          <el-option label="一等奖学金(5000元)" value="一等奖学金"></el-option>
          <el-option label="二等奖学金(3000元)" value="二等奖学金"></el-option>
          <el-option label="三等奖学金(2000元)" value="三等奖学金"></el-option>
          <el-option label="鼓励奖(500元)" value="鼓励奖"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请理由">
        <el-input type="textarea" v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item>
        <el-alert title="请填写所有必填项后再提交申请" type="info" show-icon></el-alert>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserInfoStore } from '@/store/userInfo.js';
import breadCrumb from '@/components/BreadCrumb.vue';
import { applyScholarship } from '@/api/apply.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
//用户信息
const userStore = useUserInfoStore();
//面包屑
const breadcrumb = ref()
const item = ref({
  first: '流程管理',
  second: '奖学金申请',
})
const formRef = ref(null);
const form = ref({
  student_id: userStore.account,
  student_name: userStore.name,
  department: userStore.department,
  major: '',
  grade: '',
  mobile: '',
  reason: '',
  scholarship_level: '',
  avatar: userStore.imageUrl
});

const submitForm = async () => {
  const res = await applyScholarship(form.value)
  if(res.data.status === 0){
    ElMessage.success('申请成功');
    router.push('/application')
  }else{
    ElMessage.error(res.data.message);
  }
  // 清空表单数据
  form.value = {
    student_id: userStore.account,
    student_name: userStore.name,
    department: userStore.department,
    major: '',
    grade: '',
    mobile: '',
    reason: '',
    scholarship_level: '',
    avatar: userStore.imageUrl,
  };
};
</script>

<style scoped>
.apply-scholarship-form {
  padding: 8px;
  height: calc(100vh - 101px);
  margin: 0 auto;
  background-color: #f5f5f5;
}

.apply-scholarship-form h1 {
  margin-bottom: 20px;
}

.el-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  /* 限制表单最大宽度 */
  margin: 0 auto;
  /* 居中对齐 */
}

.el-form-item .el-input {
  width: 100%;
  /* 输入框宽度调整为100% */
}

.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>